::ng-deep clr-modal {
    &.modal-valign-top .modal {
        justify-content: flex-start;
    }
    &.modal-valign-bottom .modal {
        justify-content: flex-end;
    }
    .modal-dialog {
        display: flex;
    }
    .modal-content-wrapper {
        flex: 1;
        display: flex;
    }
    .modal-dialog .modal-content {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    @media screen and (max-height: 700px) {
        .modal-dialog .modal-content {
            padding: 0.8rem;
        }
        .modal-header,
        .modal-header--accessible {
            padding-bottom: 0.8rem;
        }
        .modal-footer {
            padding-top: 0.8rem;
        }
    }

    // Dark Theme Styles
    :host-context([data-theme="dark"]) & {
        .modal-dialog {
            background-color: var(--color-weight-150);
            color: var(--color-text-100);
            border: 1px solid var(--color-component-border-100);
            box-shadow: 0 0 0 1px var(--color-component-border-200),
                        0 4px 12px rgba(0, 0, 0, 0.6);
        }

        .modal-title,
        .modal-body,
        .modal-footer {
            color: var(--color-text-100);
        }

        button {
            color: var(--color-button-small-text);
        }
    }
}

.modal-body {
    display: flex;
    flex-direction: column;
    container-type: inline-size;
}
